<template>
	<view class="search-content">
		<view class="search-area">
			<view class="area-border" @click="searchBack">
				<uni-icons type="search" color="#acacac"></uni-icons>
				<text class="area-text">{{searchTitle}}</text>
			</view>
		</view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#ff6600"></uni-segmented-control>
		<view class="search-content-control">
			<view v-show="current === 0">
				<uni-section class="mb10 uni-list-search-yx" title="院校" type="line">
					<template v-slot:right>
						<view class="uni-section-right" @click="viewList(1)">
							<text class="text">查看全部 ( {{ uniTotal }} 所 ) </text>
							<uni-icons type="forward" color="#b1b1b1"></uni-icons>
						</view>
					</template>
					<view class="search-uni-list">
						<uni-load-more style="height: 200px;" v-if="loadingUniStatus" status="loading"></uni-load-more>
						<pinapp-empty-page v-if="uniEmpty"></pinapp-empty-page>
						<uni-list v-else class="uni-list" :border="false">
							<uni-list-item v-for="(item,index) in uniZhlist"
								:to="'/pages/uni/detail/index?id='+item.id+'&title='+item.name" :key="index">
								<!-- 通过header插槽定义列表左侧图片 -->
								<template v-slot:header>
									<image class="avatar" :src="$baseUrl+item.fileIcon" mode="aspectFit"></image>
								</template>
								<!-- 通过body插槽定义布局、 -->
								<template v-slot:body>
									<view class="main">
										<text class="title">{{item.name}}</text>
										<view class="note">
											<text>{{item.params.fullName}} | {{item.isPrivate === 'Y'?'私立':'公立'}} ·
												{{item.params.typeName}}类</text>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</uni-section>
				<uni-section class="mb10 uni-list-search-zy" title="专业" type="line">
					<template v-slot:right>
						<view class="uni-section-right" @click="viewList(2)">
							<text class="text">查看全部 ( {{ specialTotal }} 所 ) </text>
							<uni-icons type="forward" color="#b1b1b1"></uni-icons>
						</view>
					</template>
					<view class="search-special-list">
						<uni-load-more style="height: 200px;" v-if="loadingSpecialStatus" status="loading">
						</uni-load-more>
						<pinapp-empty-page v-if="specialEmpty"></pinapp-empty-page>
						<uni-list class="uni-list" :border="false">
							<!-- 列表渲染 -->
							<uni-list-item v-for="(item,index) in specialZhList"
								:to="'/pages/special/detail?id='+item.id+'&name='+item.name" :key="index">
								<!-- 通过body插槽定义布局、 -->
								<template v-slot:body>
									<view class="main">
										<text class="title">{{item.name}}</text>
										<view class="feature-out">
											<view class="fz12">
												<text>专业类别：{{item.params.uniLevelName}}</text>
												<text v-if="item.params.rootName"> / {{item.params.rootName}}</text>
												<text v-if="item.params.parentName"> / {{item.params.parentName}}</text>
											</view>
											<view class="feature">
												<view class="fz12">修学年限：{{item.year|| ' - - '}}年&nbsp;&nbsp;&nbsp;&nbsp;
												</view>
												<view class="fz12">授予学位：{{item.degree || ' - - '}}</view>
											</view>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</view>
				</uni-section>
			</view>
			<view v-show="current === 1">
				<uni-section class="mb10 uni-list-search-yx" title="院校" type="line">
					<template v-slot:right>
						<view class="uni-section-right">
							<text class="text">( {{ uniTotal }} 所 ) </text>
						</view>
					</template>
					<view class="search-uni-list">
						<pinapp-empty-page v-if="uniEmpty1"></pinapp-empty-page>
						<uni-list v-else class="uni-list" :border="false">
							<uni-list-item v-for="(item,index) in uniList"
								:to="'/pages/uni/detail/index?id='+item.id+'&title='+item.name" :key="index">
								<!-- 通过header插槽定义列表左侧图片 -->
								<template v-slot:header>
									<image class="avatar" :src="$baseUrl+item.fileIcon" mode="aspectFit"></image>
								</template>
								<!-- 通过body插槽定义布局、 -->
								<template v-slot:body>
									<view class="main">
										<text class="title">{{item.name}}</text>
										<view class="note">
											<text>{{item.params.fullName}} | {{item.isPrivate === 'Y'?'私立':'公立'}} ·
												{{item.params.typeName}}类</text>
										</view>
									</view>
								</template>
							</uni-list-item>
							<!-- 加载状态：more上拉加载更多，loading加载中，no-more没有更多数据了，加载错误 -->
							<uni-load-more :status="loadingUniType"></uni-load-more>
						</uni-list>
					</view>
				</uni-section>
			</view>
			<view v-show="current === 2">
				<uni-section class="mb10 uni-list-search-zy" title="专业" type="line">
					<template v-slot:right>
						<view class="uni-section-right">
							<text class="text">( {{ specialTotal }} 所 ) </text>
						</view>
					</template>
					<view class="search-special-list">
						<pinapp-empty-page v-if="specialEmpty1"></pinapp-empty-page>
						<uni-list v-else class="uni-list" :border="false">
							<!-- 列表渲染 -->
							<uni-list-item v-for="(item,index) in specialList"
								:to="'/pages/special/detail?id='+item.id+'&name='+item.name" :key="index">
								<!-- 通过body插槽定义布局、 -->
								<template v-slot:body>
									<view class="main">
										<text class="title">{{item.name}}</text>
										<view class="feature-out">
											<view class="fz12">
												<text>专业类别：{{item.params.uniLevelName}}</text>
												<text v-if="item.params.rootName"> / {{item.params.rootName}}</text>
												<text v-if="item.params.parentName"> / {{item.params.parentName}}</text>
											</view>
											<view class="feature">
												<view class="fz12">修学年限：{{item.year|| ' - - '}}年&nbsp;&nbsp;&nbsp;&nbsp;
												</view>
												<view class="fz12">授予学位：{{item.degree || ' - - '}}</view>
											</view>
										</view>
									</view>
								</template>
							</uni-list-item>
							<!-- 加载状态：more上拉加载更多，loading加载中，no-more没有更多数据了，加载错误 -->
							<uni-load-more :status="loadingSpecialType"></uni-load-more>
						</uni-list>
					</view>
				</uni-section>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['综合', '院校', '专业'],
				searchTitle: "",
				uniEmpty: false,
				uniEmpty1: false,
				uniList: [],
				uniTotal: 0,
				uniZhlist: [],
				specialEmpty: false,
				specialEmpty1: false,
				specialList: [],
				specialTotal: 0,
				specialZhList: [],
				// 查询参数
				queryZhParams: {
					pageNum: 1,
					pageSize: 3,
					maxPage: 1,
					name: ""
				},
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					maxPage: 1,
					name: ""
				},
				loadingUniType: 'more',
				loadingSpecialType: 'more',
				loadingUniStatus: false,
				loadingSpecialStatus: false
			}
		},
		onShow() {},
		onLoad(option) {
			this.searchTitle = option.title
			this.queryZhParams.name = option.title
			this.queryParams.name = option.title
			//加载大学(综合)
			this.loadZhUniData()
			//加载专业(综合)
			this.loadZhSpecialData()
			this.loadUniData()
			this.loadSpecialData()
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 加载大学数据
			loadZhUniData() {
				this.loadingUniStatus = true
				this.$get(this.$api.web.uni.list, this.queryZhParams).then(res => {
					this.uniZhlist = res.rows
					this.uniTotal = res.total
					this.uniEmpty = Boolean(res.total === 0)
					uni.hideLoading()
					this.loadingUniStatus = false
				})
			},
			// 加载专业数据
			loadZhSpecialData() {
				this.loadingSpecialStatus = true
				this.$get(this.$api.web.special.listWithParent, this.queryZhParams).then(res => {
					this.specialZhList = res.rows
					this.specialTotal = res.total
					this.specialEmpty = Boolean(res.total === 0)
					uni.hideLoading()
					this.loadingSpecialStatus = false
				})
			},
			viewList(currentTemp) {
				this.current = currentTemp
			},
			// 加载大学数据
			loadUniData() {
				this.loadingUniType = 'loading'
				this.$get(this.$api.web.uni.list, this.queryParams).then(res => {
					this.uniList = this.uniList.concat(res.rows)
					// 是否有更多数据
					this.queryParams.maxPage = res.pages
					this.loadingUniType = res.hasNextPage ? 'more' : 'nomore'
					this.uniEmpty1 = Boolean(res.total === 0)
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			},
			// 加载专业数据
			loadSpecialData() {
				this.loadingSpecialType = 'loading'
				this.$get(this.$api.web.special.listWithParent, this.queryParams).then(res => {
					this.specialList = this.specialList.concat(res.rows)
					// 是否有更多数据
					this.queryParams.maxPage = res.pages
					this.loadingSpecialType = res.hasNextPage ? 'more' : 'nomore'
					this.specialEmpty1 = Boolean(res.total === 0)
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			},
			// 初始参数
			init() {
				this.queryParams.maxPage = 1
				this.queryParams.pageNum = 1
				this.queryParams.pageSize = 10
			},
			searchBack() {
				uni.navigateTo({
					url: '/pages/index/search?title=' + this.searchTitle
				})
			}
		},
		onPullDownRefresh() {
			this.init()
			if (this.current === 1) {
				this.uniList = []
				this.loadUniData()
			} else if (this.current === 2) {
				this.specialList = []
				this.loadSpecialData()
			}
		},
		onReachBottom() {
			if (this.queryParams.pageNum < this.queryParams.maxPage) {
				this.queryParams.pageNum++
				if (this.current === 1) {
					this.loadUniData()
				} else if (this.current === 2) {
					this.loadSpecialData()
				}
			} else { // 已经没有更多
				if (this.current === 1) {
					this.loadingUniType = 'no-more'
				} else if (this.current === 2) {
					this.loadingSpecialType = 'no-more'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-area {
		padding: 5px 15px;

		.area-border {
			line-height: 36px;
			border-radius: 25px;
			line-height: 30px;
			background-color: #F8F8F8;
			padding: 3px 20px;
		}

		.area-text {
			margin-left: 5px;
			font-size: 14px;
		}
	}

	.search-content {
		background-color: #fff;
	}

	.search-content-control {
		padding: 0 15px 20px;
	}

	.uni-section-right {
		display: flex;

		.text {
			color: #b1b1b1;
			font-size: 12px;
		}
	}

	.search-uni-list {
		.avatar {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}

		.main {
			justify-content: space-between;
			flex: 1;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #545454;
			}

			.note {
				flex-direction: row;
				color: #ff6600;
				margin-top: 12rpx;
			}
		}
	}

	.search-special-list {
		.main {
			justify-content: space-between;
			flex: 1;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #545454;
			}

			.feature-out {
				margin-top: 5px;
				color: #b4b4b4;
			}

			.feature {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 5px;
				color: #b4b4b4;
			}

			.fz12 {
				font-size: 12px;
			}
		}
	}
</style>
<style lang="scss">
	.uni-list-search-yx {
		.uni-list-item__container {
			background-image: linear-gradient(45deg, #fff 35%, #f2f4f5 70%, #eff8ff 60%);
			margin-bottom: 10px;
		}
	}

	.uni-list-search-zy {
		.uni-list-item__container {
			background-image: linear-gradient(to right bottom, #edf8ff, #fff, #fff, #edf8ff);
			border-radius: 10px;
			margin-bottom: 10px;
		}
	}
</style>
